<template>
    <div style="width: 100%; height: 100%;">
        <el-menu :default-active="$route.path"
                 :unique-opened=true
                 router
                 @select="onSelected"
                 v-for="(item, index) in menuItem"
                 :key="index">
            <el-menu-item :index="item.path"
                          v-if="typeof item.child === 'undefined'">
                <i class="icon"
                   :class="item.icon"></i>
                {{ item.title }}
            </el-menu-item>
            <el-submenu v-else
                        :index="item.path">
                <template slot="title">
                    <i class="icon"
                       :class="item.icon"></i>
                    {{ item.title }}
                </template>
                <el-menu-item v-for="(child_item, child_index) in item.child"
                              :index="child_item.path"
                              :key="child_index">
                    <i class="icon"
                       :class="child_item.icon"></i>
                    {{ child_item.title }}
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                menuItem: [{
                    title: 'HomePage',
                    path: '/home',
                    icon: 'el-icon-menu'
                }, {
                    title: 'Accounts',
                    path: '/accounts',
                    icon: 'el-icon-setting'
                }, {
                    title: 'Logs',
                    path: '/logs',
                    icon: 'el-icon-d-arrow-right'
                }]
            }
        },
        methods: {
            onSelected (key, keyPath) {

            }
        }
    }
</script>
